import React, { useState } from "react"
import iconElectronLogo from "@/assets/image/icon_electron_logo.svg"
import iconWanLogo from "@/assets/image/icon_logo.png"
import styles from "./sidebar.module.css"

interface PropsSideBar {
    compClass: string
}


/**
 * 侧边栏
 */
const SideBar = ({ compClass }: PropsSideBar) => {
    const [selectedIndex, setSelectedIndex] = useState(0)
    return (
        <nav className={compClass}>
            <header className={styles.header}>
                <img className={styles.header_logo} src={iconElectronLogo}></img>
                <span className={styles.header_title}>玩Android</span>
            </header>
            <ol>
                {
                    navigationList.map((item, i) => {
                        const selected = selectedIndex === i
                        return (
                            <li className={styles.nav_item} key={item.id}>
                                <div className={`${selected ? styles.item_content_selected : styles.item_content}`}
                                    onClick={() => {
                                        setSelectedIndex(i)
                                    }}>
                                    <img className={styles.item_icon} src={selected ? item.selectedIcon:item.icon}></img>
                                    <span>{item.title}</span>
                                </div>
                            </li>
                        )
                    })
                }
            </ol>
        </nav>
    )
}

const navigationList = [
    {
        id: "home", title: "首页", icon: iconWanLogo, selectedIcon: iconElectronLogo
    },
    {
        id: "route", title: "学习路线", icon: iconWanLogo, selectedIcon: iconElectronLogo
    },
    {
        id: "userArticle", title: "广场", icon: iconWanLogo, selectedIcon: iconElectronLogo
    },
    {
        id: "navigation", title: "导航", icon: iconWanLogo, selectedIcon: iconElectronLogo
    },
    {
        id: "book", title: "教程", icon: iconWanLogo, selectedIcon: iconElectronLogo
    },
    {
        id: "question", title: "问答", icon: iconWanLogo, selectedIcon: iconElectronLogo
    },
    {
        id: "project_index", title: "项目", icon: iconWanLogo, selectedIcon: iconElectronLogo
    },
    {
        id: "wxArticle", title: "公众号", icon: iconWanLogo, selectedIcon: iconElectronLogo
    },
    {
        id: "project", title: "项目分类", icon: iconWanLogo, selectedIcon: iconElectronLogo
    },
    {
        id: "tools", title: "工具", icon: iconWanLogo, selectedIcon: iconElectronLogo
    },
]

export default SideBar